import React, { useState } from "react";
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
  ScrollView,
  Image,
  Text,
  Platform,
  StatusBar,
  Clipboard,
} from "react-native";
import { AMAZON_URL } from "../../api/query";
import Toast from "react-native-root-toast";
import { FontAwesome5 } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

const dimen = Dimensions.get("window");
const width = dimen.width;

const DetialScreen = ({ route }) => {
  const { queryDetail } = route.params;
  console.log(queryDetail);

  const [currentPage, setPage] = useState(0);

  // // 监听滚动
  // const onAnimationEnd = (e) => {
  //   // 求出水平方向上的偏移量
  //   let offSetX = e.nativeEvent.contentOffset.x;
  //   // 计算当前页码
  //   let currentPage = offSetX / width;
  //   console.log("currenPage---", currentPage);
  //   setPage(currentPage);
  //   console.log(currentPage);
  // };

  return (
    <View style={styles.container}>
      {/* <ScrollView
        vertical={true}
        showsVerticalScrollIndicator={true} // 隐藏垂直指示器
      > */}
      <View>
        <ScrollView
          style={styles.scrollViewStyle}
          horizontal={true} // 水平方向
          showsHorizontalScrollIndicator={false} // 隐藏水平指示器
          showsVerticalScrollIndicator={false} // 隐藏垂直指示器
          pagingEnabled={true} // 开启分页功能
          // onMomentumScrollEnd={onAnimationEnd} // 当一帧滚动完毕的时候调用
        >
          {queryDetail.image.map((item, index) => {
            return (
              // <Image
              //   key={index}
              //   style={styles.imageStyle}
              //   source={require("../../../assets/ceshi_1.png")}
              // />
              <Image
                key={index}
                style={styles.imageStyle}
                source={{ uri: AMAZON_URL + "/" + item }}
              />
            );
          })}
        </ScrollView>
        {/* 实例化分页指示器 */}
        <View style={styles.pagingIndicatorStyle}>
          {queryDetail.image.map((item, index) => {
            return (
              <Text
                key={index}
                style={[
                  { fontSize: 30 },
                  currentPage === index
                    ? { color: "orange" }
                    : { color: "white" },
                ]}
              >
                &bull;
              </Text>
            );
          })}
        </View>
      </View>
      <View>
        <View
          style={[
            styles.part1,
            { flexDirection: "row", justifyContent: "space-between" },
          ]}
        >
          <View>
            <Text style={styles.titleText}>
              {queryDetail.basePlate.category +
                queryDetail.basePlate.type +
                " * " +
                queryDetail.shroudPlate.category +
                queryDetail.shroudPlate.type}
            </Text>
            <View
              style={{
                flexDirection: "row",
              }}
            >
              <Text
                style={{
                  fontSize: 13,
                  fontWeight: "bold",
                  color: "#fd6e44",
                  marginTop: 8,
                  marginBottom: 10,
                }}
              >
                单价: {queryDetail.price} 元/件
              </Text>
            </View>
          </View>
          <View
            style={{
              borderBottomWidth: 4,
              flexDirection: "row",
              marginRight: 20,
              marginTop: 15,
              marginBottom: 5,
              padding: 3,
              borderRadius: 8,
              alignItems: "center",
              borderBottomColor: "#f3f0c9",
              // backgroundColor: "#f3f0c93c",
            }}
          >
            <Text style={{ fontSize: 13, marginTop: 5 }}>￥</Text>
            <Text style={{ fontSize: 20, color: "#fd6e44" }}>
              {(queryDetail.price * queryDetail.amount).toFixed(0)}
            </Text>
            <Text style={{ marginTop: 5, fontSize: 12 }}> 元</Text>
          </View>
        </View>
        <View style={[styles.lineView, { marginTop: 5 }]}></View>
        <View style={styles.part2}>
          <Image
            style={[styles.itemStyle, { width: 20, height: 20, margin: 7 }]}
            source={require("../../../assets/dingwei.png")}
          />
          <View>
            <Text style={{ marginTop: 10 }}>
              {queryDetail.company.company_name}
            </Text>
            <Text
              style={{
                fontSize: 12,
                color: "#888",
                marginTop: 6,
                // marginBottom: 10,
              }}
            >
              {queryDetail.company.address +
                " | " +
                queryDetail.company.detailed_address}
            </Text>
            <View
              style={{
                flexDirection: "row",
                marginTop: 8,
                marginBottom: 10,
              }}
            >
              <View style={[styles.tagStyle]}>
                <FontAwesome5
                  name="user-alt"
                  size={11.5}
                  color="#6bc96e"
                  style={{ margin: 2 }}
                />
                <Text style={{ color: "#888", fontSize: 12 }}>
                  {queryDetail.company.admin_name}
                </Text>
              </View>
              {queryDetail.company.wechat ? (
                <TouchableOpacity
                  style={[
                    styles.tagStyle,
                    { backgroundColor: "#bff9d16e", marginLeft: 10 },
                  ]}
                  onPress={() => {
                    Clipboard.setString(queryDetail.company.admin_wechat);
                    Toast.show("已复制");
                  }}
                >
                  <AntDesign
                    name="wechat"
                    size={13.5}
                    color="#6bc96e"
                    style={{ margin: 1.5 }}
                  />
                  <Text style={{ color: "#888", fontSize: 12 }}>
                    {queryDetail.company.admin_wechat}
                  </Text>
                </TouchableOpacity>
              ) : null}
              <TouchableOpacity
                style={[styles.tagStyle, { marginLeft: 10 }]}
                onPress={() => {
                  Clipboard.setString(queryDetail.company.admin_phone);
                  Toast.show("已复制");
                }}
              >
                <Entypo
                  name="old-phone"
                  size={13.5}
                  color="#6bc96e"
                  style={{ margin: 1.5 }}
                />
                <Text style={{ color: "#888", fontSize: 12 }}>
                  {queryDetail.company.admin_phone}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <Text
          style={{
            fontSize: 12,
            color: "#999",
            marginTop: 8,
            marginLeft: 20,
          }}
        >
          温馨提示:本平台暂不提供交易,请点击复制联系方式自行联系
        </Text>
        <View
          style={[
            styles.lineView,
            { marginTop: 20, height: 7, width: "100%", marginLeft: 0 },
          ]}
        ></View>
        {/* <Text
          style={[
            styles.scrollText,
            { width: 100, marginTop: 10, marginLeft: 145 },
          ]}
        >
          商品信息
        </Text> */}
        <View style={{ flexDirection: "row", marginTop: 5 }}>
          <View style={{ width: "46%" }}>
            <View
              style={{
                marginTop: 10,
                height: 22,
                flexDirection: "row",
                justifyContent: "center",
              }}
            >
              <Text style={[styles.scrollText, styles.textSelected]}>基板</Text>
              {/* <Text style={[styles.scrollText]}>覆板</Text> */}
            </View>
            <View style={{ marginLeft: 25, marginTop: 10 }}>
              <View style={{ flexDirection: "column" }}>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  基板 :{" "}
                  {queryDetail.basePlate.category + queryDetail.basePlate.type}
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  密度 : {queryDetail.basePlate.density} g/cm3
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  单价 : {queryDetail.basePlate.unit_price[0]} 元/m2
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  加工费 : {queryDetail.basePlate.pro_price[0]} 元/kg
                </Text>
              </View>
            </View>
          </View>
          <View
            style={{
              width: 1,
              marginTop: 10,
              backgroundColor: "#eee",
              marginLeft: "4%",
              marginRight: "4%",
            }}
          ></View>
          <View style={{ width: "46%" }}>
            <View
              style={{
                marginTop: 10,
                height: 22,
                flexDirection: "row",
                justifyContent: "center",
              }}
            >
              <Text style={[styles.scrollText, styles.textSelected]}>覆板</Text>
              {/* <Text style={[styles.scrollText]}>覆板</Text> */}
            </View>

            <View style={{ marginLeft: 10, marginTop: 10 }}>
              <View style={{ flexDirection: "column" }}>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  覆板 :{" "}
                  {queryDetail.shroudPlate.category +
                    queryDetail.shroudPlate.type}
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  密度 : {queryDetail.shroudPlate.density} g/cm3
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  单价 : {queryDetail.shroudPlate.unit_price[0]} 元/m2
                </Text>
                <Text style={{ fontSize: 13, marginTop: 10 }}>
                  加工费 : {queryDetail.shroudPlate.pro_price[0]} 元/kg
                </Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View style={{ height: 130 }}></View>
      {/* </ScrollView> */}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  scrollViewStyle: {
    backgroundColor: "#eeeeee",
    // marginTop: 20,
  },
  pagingIndicatorStyle: {
    backgroundColor: "rgba(255,255,255,0.0)",
    width: width,
    // 主轴方向与对齐方式
    flexDirection: "row",
    justifyContent: "center",
    // 绝对定位,使页码指示器盖在scrollView上面
    position: "absolute",
    bottom: 0,
  },
  imageStyle: {
    // borderWidth: 1,
    width: width,
    height: 250,
    // resizeMode: "contain",
  },

  part1: {
    marginLeft: 20,
    marginTop: 10,
  },
  titleText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  tagStyle: {
    // borderWidth: 1,
    // borderColor: "#F9be7d",
    backgroundColor: "#f9eabf6e",
    flexDirection: "row",
    justifyContent: "center",
    // width: 110,
    // marginTop: 10,
    paddingLeft: 3,
    paddingRight: 3,
    // padding: 1,
    // paddingLeft: 10,
    // paddingRight: 10,
    borderRadius: 6,
    // color: "#F9be7d",
  },
  lineView: {
    width: "90%",
    height: 1,
    backgroundColor: "#eee",
    marginLeft: "5%",
  },
  part2: {
    marginLeft: 20,
    marginRight: 20,
    marginTop: 15,
    alignItems: "center",
    flexDirection: "row",
    borderRadius: 10,
    backgroundColor: "#eeeeee7a",
  },
  scrollText: {
    fontSize: 15,
    fontWeight: "bold",
    padding: 2,
    paddingLeft: 4,
    width: 39,
  },
  textSelected: {
    borderBottomWidth: 5,
    borderColor: "#6c9eff",
  },
});

export default DetialScreen;
